<!--header.html start-->
<% include parts/header.html %>
<!--header.html end-->

<body class="black-theme">
  <!--header_view.html start-->
  <% include parts/header_view.html %>
  <!--header_view.html end-->

  <div id="init-step-one">
    <div class="container box-container">
      <div class="box-content">
        <h2 class="title">请填写以下表单数据</h2>
        <p class="info">这些信息很重要，关乎着您是否能正确的链接数据库</p>
      </div>

      <div class="box-content input-enter">
        <div class="form-field">
          <label class="label-title" for="">数据库名</label>
          <div class="input-wrapper">
            <input type="text" v-model="database" />
          </div>
        </div>

        <div class="form-field">
          <label class="label-title" for="">数据库用户名</label>
          <div class="input-wrapper">
            <input type="text" v-model="username" />
          </div>
        </div>

        <div class="form-field">
          <label class="label-title" for="">数据库密码</label>
          <div class="input-wrapper">
            <input type="password" v-model="password" />
          </div>
        </div>

        <div class="form-field">
          <label class="label-title" for=""
            >数据库主机（一般为localhost）</label
          >
          <div class="input-wrapper">
            <input type="text" v-model="host" />
          </div>
        </div>

        <div class="form-field">
          <label class="label-title" for="">数据库端口号</label>
          <div class="input-wrapper">
            <input type="text" v-model="mysql_port" />
          </div>
        </div>
      </div>
    </div>

    <div class="box-content-footer">
      <div class="container">
        <div class="clearfix">
          <button class="box-btn big pull-left" @click="step_submit(0)">
            返回 <i class="iconfont icon-back"></i>
          </button>
          <button class="box-btn big pull-right" @click="set_mysql">
            确定 <i class="iconfont icon-more"></i>
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#init-step-one',
      data: {
        database: '',
        username: '',
        password: '',
        host: 'localhost',
        mysql_port: 3306
      },
      methods: {
        step_submit: function(val) {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          var that = this
          _server.cliSetStep({ step: val }).then(function(res) {
            loading.close()
            that.$nextTick(function() {
              if (res.state === 'success') {
                window.location.reload()
              } else {
                alert(res.message)
              }
            })
          })
        },
        set_mysql: function(val) {
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          var that = this
          _server
            .cliSetMysql({
              database: that.database,
              username: that.username,
              password: that.password,
              host: that.host,
              mysql_port: 3306
            })
            .then(function(res) {
              that.$nextTick(function() {
                loading.close()
                if (res.state === 'success') {
                  that.$message({
                    message: '数据库创建成功,正在前往下一步',
                    type: 'success'
                  })
                  that.step_submit(2)
                } else {
                  that.$message({
                    message: res.message,
                    type: 'error'
                  })
                }
              })
            })
        }
      }
    })
  </script>
</body>

<% include parts/footer.html %>
